<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="echarts.common.min.js"></script>
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <title>Title</title>
    <style>
        *{margin:0; padding:0; box-sizing:border-box; font-family: "Microsoft YaHei"; font-size:14px; text-decoration: none;}
        .wrap{
            width: 100%;
        }
        a{
            color:deepskyblue;
        }
        .title{
            width:100px;
            font-weight:bold;
            font-size:18px;
            margin:5px auto;
        }
        .top_nav{
            height: 40px;
            display: flex;
            border-bottom: 1px solid #ccc;
            text-align: center;
            line-height: 40px;
        }
        .top_nav>span{
            flex:1;
            font-size:16px;
        }
        .nav1{
            color:deepskyblue;
            border-bottom:1px solid deepskyblue;
            height: 40px;
        }
        dt,dd{
            height:25px;
            line-height:25px;
        }
        dt{
            border-bottom:1px solid #ccc;
        }
        .content1{
            position: relative;
        }
        .content1 dl span{
            display: inline-block;
            position: absolute;
            right:0;
        }
        .content2{
            margin:10px auto;
            position: relative;
        }
        .content2 p:nth-child(1){
            border-bottom:1px solid #ccc;
        }
        .content2 span, .content2 p:nth-of-type(3){
            display: inline-block;
            position: absolute;
            right:0;
        }
       #page2 ul {
            margin:10px auto;
            width: 340px;
            display: flex;
            border:1px solid #ccc;
        }
        #page2 ul li{
            text-align:center;
            flex:1;
            display: inline-block;
            border-right:1px solid #ccc;
        }
        #page2 ul .li_one{
            background-color: #ccc;
            color:#fff;
        }
        #page2 p{
            height:40px;
            border-bottom:1px solid #ccc;
            display: flex;
        }
        #page2 p .all_left{
            flex:2;
            height:40px;
            line-height: 40px;
        }
        #page2 p .all_right{
            flex:8;
            height: 40px;
            line-height: 20px;
        }
       .page{
            display: none;
        }
        .page1{
            display: block;
        }
        #page3 div span{
            float: right;
            color: #AAAAAA;
        }
        .gg{
            display:none;
        }
        .gg1{
            display:block;
        }

    </style>
</head>
<body>
<div class="wrap">
    <div class="title">基金档案</div>
    <div class="top_nav">
        <span class="xuan nav1" index = "1">概况</span>
        <span class="xuan" index = "2">公告</span>
        <span class="xuan" index = "3">资产配置</span>
    </div>
    <!--第一个页面-->
    <div id="page1" class="page page1">
    <div class="content1">
        <dl>
            <dt>基金信息</dt>
            <dd>基金全称<span>天弘余额宝货币市场基金</span></dd>
            <dd>基金代码<span>000198</span></dd>
            <dd>成立日期<span>2013-05-29</span></dd>
            <dd>资产规模<span>1.32万亿</span></dd>
            <dd>基金管理人<span>天弘基金管理有限公司</span></dd>
            <dd>基金托管人<span>中信银行股份有限公司</span></dd>
        </dl>
    </div>
    <div class="content2">
        <p>基金经理<span><a href="">在任情况</a></span></p>
        <p>王登峰先生，经济学硕士，9年证券从业经验。历任中信建投证券股份有限公司固定收益部高级经理。2012年5月加盟本公司，历任固定收益研究员、天弘季加利理财债券型证券投资基金基金经理(2014年6 月至2016年1月期间)。现任天弘现金管家货币市场基金基金经理、天弘..</p>
        <p><a href="">查看更多</a></p>
    </div>
    </div>
    <!--第二个页面-->
    <div id="page2" class="page">
        <ul>
            <li class="li_one" item = "1">全部</li>
            <li item = "2">发行运作</li>
            <li item = "3">定期报告</li>
            <li item = "4">其他公告</li>
        </ul>
        <div id = "fenlei1" class="gg gg1">
        <p><span class = "all_left">10-23</span><span class="all_right">天弘余额宝货币市场基金2018年第3季度报告</span></p>
        <p><span class = "all_left">10-23</span><span class="all_right">天弘基金管理有限公司关于旗下基金所持“辰安科技”调整的提示性公告</span></p>
        <p><span class = "all_left">10-03</span><span class="all_right">天弘基金管理有限公司关于旗下基金所持益丰药房估值方法调整的提示性公告</span></p>
        <p><span class = "all_left">09-23</span><span class="all_right">天弘基金管理有限公司关于旗下基金所持中天金融估值方法调整的提示性公告</span></p>
        <p><span class = "all_left">09-23</span><span class="all_right">天弘基金管理有限公司关于在网上交易系统指定支付渠道开展交易费率的公告</span></p>
        <p><span class = "all_left">09-13</span><span class="all_right">天弘基金管理有限公司关于在天弘爱理财APP开展弘钱包账户交易费率的公告</span></p>
        </div>
        <div id = "fenlei2" class="gg">
            <p><span class = "all_left">10-23</span><span class="all_right">天弘余额宝货币市场基金托管协议(更 新)货币市场基金2018年第3季度报告</span></p>
            <p><span class = "all_left">10-23</span><span class="all_right">天弘余额宝货币市场基金招募说明书(更新)摘要整的提示性公告</span></p>
            <p><span class = "all_left">10-03</span><span class="all_right">天弘余额宝货币市场基金招募说明书(更新)法调整的提示性公告</span></p>
            <p><span class = "all_left">09-23</span><span class="all_right">天弘余额宝货币市场基金招募说明书(更新)摘要场基金2018年第3季度报告</span></p>
            <p><span class = "all_left">09-23</span><span class="all_right">天弘余额宝货币市场基金招募说明书在网上交易系统</span></p>
            <p><span class = "all_left">09-13</span><span class="all_right">天弘余额宝货币市场基金招劳说明书(更新)易费率优惠活动</span></p>
        </div>
        <div id = "fenlei3" class="gg">
            <p><span class = "all_left">10-23</span><span class="all_right">天弘余额宝货币市场基金2018年半年度报告摘要天弘余额宝货币市场基金2018</span></p>
            <p><span class = "all_left">10-23</span><span class="all_right">天弘基金管理有限公司关于旗下基金所持“辰安科技”估值方法调整的提示公告</span></p>
            <p><span class = "all_left">10-03</span><span class="all_right">天弘基金管理有限公司关于旗下基金所持“辰安科技”估值方法调整的提示公告</span></p>
            <p><span class = "all_left">09-23</span><span class="all_right">天弘基金管理有限公司关于旗下基金所持中天金融估值方法调整的提示性公告</span></p>
            <p><span class = "all_left">09-23</span><span class="all_right">天弘基金管理有限公司关于在网上交易系统指定支付渠道开展交易费率的公告</span></p>
            <p><span class = "all_left">09-13</span><span class="all_right">天弘基金管理有限公司关于在天弘爱理财APP开展交易费率优惠活动的公告</span></p>
        </div>
        <div id = "fenlei4" class="gg">
            <p><span class = "all_left">10-23</span><span class="all_right">天弘余额宝货币市场基金2018年第3季度报告</span></p>
            <p><span class = "all_left">10-23</span><span class="all_right">天弘余额宝货币市场基金2018年半年度2018年第3季度报告</span></p>
            <p><span class = "all_left">10-03</span><span class="all_right">天弘余额宝货币市场基金招募说明书(更新)摘要法调整的提示性公告</span></p>
            <p><span class = "all_left">09-23</span><span class="all_right">天弘基金管理有限公司关于旗下基金所持中天金融估值方法调整的提示性公告</span></p>
            <p><span class = "all_left">09-23</span><span class="all_right">天弘余额宝货币市场基金2018年半年度报告摘要2018年第3季度报告</span></p>
            <p><span class = "all_left">09-13</span><span class="all_right">天弘基金管理有限公司关于在天弘爱理财APP开展弘钱包账户交易费率优惠活动的公告</span></p>
        </div>
    </div>
    <!--第三个页面-->
    <div id="page3" class="page">
        <div>资产分布<span>2018-09-30</span></div>
        <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
        <div id="main" style="width: 400px ;height:200px;"></div>
    </div>
</div>
<script>
    var li = document.getElementsByTagName("li");
    function removeLiStyle() {
        for (var i = 0; i < li.length; i ++ ){
            li[i].className = " ";
        }
    }
    function changeLiStyle() {
        for (var j = 1; j < 5; j ++){
           document.getElementById("fenlei"+j).className = "gg";
        }
    }
    for (var i = 0; i < li.length; i ++){
        li[i].onclick = function () {
            removeLiStyle();
            this.className += " li_one";
            var item = this.getAttribute("item");
            changeLiStyle();
            document.getElementById("fenlei" + item).className += " gg1";
        }
    }
    var span = document.getElementsByClassName("xuan");
    function removeSpanColor() {
        for (var i = 0; i < span.length; i ++){
            span[i].className = "xuan"; //" "里面不能为空，因为原来的className有类名 必须填上xuan
        }
    }
        for (var i = 0; i < span.length; i++) {
            span[i].onclick = function(){
                var num = this.getAttribute("index");
                changePage();
                removeSpanColor();
                this.className += " nav1"; //加上类名 而且类名前面要有空格
                document.getElementById("page" + num).className += " page1";
            }
        }
        function changePage() {
            for (var i = 1;i <= 3; i ++){
                document.getElementById("page" + i).className = " page";
            }
        }
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));
        var option = {
            tooltip: {
                trigger: 'item',
                formatter: "{a} <br/>{b}: {c} ({d}%)"
            },
            legend: {
                orient: 'vertical',
                x: 'left',
                data:['债券','银行存款','其他']
            },
            series: [
                {
                    name:'访问来源',
                    type:'pie',
                    radius: ['50%', '70%'],
                    avoidLabelOverlap: false,
                    label: {
                        normal: {
                            show: false,
                            position: 'center'
                        },
                        emphasis: {
                            show: true,
                            textStyle: {
                                fontSize: '30',
                                fontWeight: 'bold'
                            }
                        }
                    },
                    labelLine: {
                        normal: {
                            show: false
                        }
                    },
                    data:[
                        {value:335, name:'债券'},
                        {value:310, name:'银行存款'},
                        {value:234, name:'其他'},
                    ]
                }
            ]
        };
         // 使用刚指定的配置项和数据显示图表。
         myChart.setOption(option);
</script>
</body>
</html>